<template>
  <div class="heatmap" :id="propses.id"></div>
</template>
<script lang='ts' setup>
// 引入图表库
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
type EChartsOption = echarts.EChartsOption;
const propses = defineProps({
  id: {
    type: String, //类型字符串
    default: "",
  },

  data: {
    type: Array, //类型数组
    default: [],
  },
  xName: {
    type: String,
    default: "",
  },
  yName: {
    type: String,
    default: "",
  },
});

const clickIsDis = (id, data, xName, yName) => {
  /**************设备概览图表start********************/
  var chartDom = document.getElementById(id)!;
  setTimeout(() => {
    console.log(data);
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
      tooltip: {
        backgroundColor: "rgba(0,0,0,0.7)",
        borderColor: "rgba(0,0,0,0.7)",
        textStyle: {
          color: "rgba(255, 255, 255, .9)",
        }
      },
      grid: { left: 80, right: 50, top: 60, bottom: 60 },
      xAxis: {
        type: "category",
        name: xName,
        max: null,
        axisLabel: { fontSize: 12, color: "#333", fontWeight: "normal" },
        axisLine: { show: false, lineStyle: { color: "#333" } },
      },
      yAxis: {
        type: "category",
        name: yName,
        max: null,
        axisLabel: { fontSize: 12, color: "#333", fontWeight: "normal" },
        axisLine: { show: false, lineStyle: { color: "#333" } },
      },
      visualMap: {
        show: false,
        left: 0,
        bottom: 0,
        type: null,
        min: min.value,
        max: max.value,
        splitNumber: 3,
        calculable: true,
        realtime: false,
        inRange: { color: ["#B0E8C8", "#FFDD86", "#FE1803"] },
      },
      series: [
        {
          type: "heatmap",
          emphasis: { itemStyle: { borderColor: "#333", borderWidth: 1 } },
          progressive: 1000,
          animation: false,
        },
      ],
      dataset: {
        source: data,
      },
    };
    if (data.length > 40) {
      option.dataZoom = [{
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // // 设置背景颜色
        // backgroundColor: "rgba(216, 216, 216, 1)",
        // // 设置选中范围的填充颜色
        // fillerColor: "rgba(91,143,249,1)",
        // // 设置边框颜色
        // borderColor: "rgba(216, 216, 216, 1)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 40,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        width: "100%",
        // 设置滚动条高度
        height: 10,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLock: false,
        // 是否开启刷选功能。你可以按住鼠标左键后框选出选中部分
        brushSelect: false,
        // 控制手柄的尺寸
        // handleSize: 1,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
        moveHandleStyle: {
          color: "rgba(216, 216, 216, 1)",
        }
      }]
    }

    option && myChart.setOption(option);
    /**************设备概览图表end********************/
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }, 200);
};
let min = ref<any>(null);
let max = ref<any>(null);
// 找出最小值和最大值给出区间
function setNumInterval(data) {
  data.forEach((point, index) => {
    if (point[2] != null && min.value == null && max.value == null) {
      min.value = point[2];
      max.value = point[2];
    } else if (point[2] != null) {
      if (point[2] < min.value) {
        min.value = point[2]
      }
      if (point[2] > max.value) {
        max.value = point[2];
      }
    }
  });
}
onMounted(() => {
  setNumInterval(propses.data);
  clickIsDis(propses.id, propses.data, propses.xName, propses.yName,);
});
defineExpose({ clickIsDis });
</script>
<style scoped>
.heatmap {
  margin-top: 20px;
  background: #f6f7f9;
  width: 100%;
  border-radius: 12px;
  height: 294px;
  margin-bottom: 20px;
}
</style>